<template>
	<view class="draw-content">
		<view class="close-lay" @click="onCloseClick">
			<image class="close-icon" src="/static/imgs/login/icon_dropdown@2x.png">
		</view>
		<view ref="rightCAD" id="rightCAD" class="rightCAD" :drawclipprop="drawClip"
			:change:drawclipprop="renderCAD.drawClipChange" :initprop="initProp" :change:initprop="renderCAD.initChange"
			:prop="svgOption" :change:prop="renderCAD.svgOptionChange" :selectshapeprop="selectedShapeId"
			:change:selectshapeprop="renderCAD.onShapeSelectChange" :ballmarkprop="ballMarkData"
			:change:ballmarkprop="renderCAD.onBallMarkDataChange" :drawparamprop="selectedParams"
			:change:drawparamprop="renderCAD.onDrawParamChange" :removeprop="removeSign"
			:change:removeprop="renderCAD.onRemoveSignChange" :marktextprop="markupText"
			:change:marktextprop="renderCAD.onMarkupTextChange" :selectedmarkupprop="selectedMarkupId"
			:change:selectedmarkupprop="renderCAD.onSelectMarkupIdChange" :svgmarkupfileurlprop="svgMarkupFileUrl"
			:change:svgmarkupfileurlprop="renderCAD.onSvgMarkupFileUrlChange" :caneditmarkupprop="canEditSelectMarkup"
			:change:caneditmarkupprop="renderCAD.onCanEditSelectMarkupChange"
			:canfitposandscaleprop="canFitPositionAndScale"
			:change:canfitposandscaleprop="renderCAD.onCanFitPositionAndScaleChange" 
			:markupsignprop="getMarkupStrSign" :change:markupsignprop="renderCAD.onGetMarkupStrSignChange"
			:resetviewprop="resetDrawViewSign" :change:resetviewprop="renderCAD.onResetDrawViewChange">
		</view>

		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="InputTextDefaultStr" placeholder="请输入内容"
				@confirm="inputConfirm" @close="inputConfirm('')"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import captureScreenUtil from "./utils/captureScreen.js";
	export default {
		props: {
			svgOption: {
				type: Object,
				default: () => {
					return {
						// svgSourcePath: "http://39.105.108.125:8055/www/upload/Enterprise%20Documents/PID/testjgc.svg",
						// svgSourceUrl: "http://39.105.108.125:8055/www/upload/Enterprise%20Documents/PID/testjgc.svg",
						svgSourcePath: "",
						svgSourceUrl: "",
					};
				}
			},

			svgMarkupFileUrl: {
				type: String,
				default: "",
			},

			// 选中图形id 绘制markup时使用
			selectedShapeId: {
				type: Number,
				default: 0,
			},

			// 选中的markup的id
			selectedMarkupId: {
				type: Number,
				default: 0,
			},

			ballMarkData: {
				type: Array,
				default: () => {
					return [];
				},
			},

			needScreenShot: {
				type: Boolean,
				default: false,
			},

			lineColor: {
				type: String,
				default: "#0000ff",
			},

			lineWidth: {
				type: Number,
				default: 1,
			},

			fontSize: {
				type: Number,
				default: 1,
			},

			canEditSelectMarkup: {
				type: Boolean,
				default: false,
			},

			canFitPositionAndScale: {
				type: Boolean,
				default: false,
			}
		},

		data() {
			return {
				// 初始化后改变initProp，保存instance
				initProp: -1,
				drawClip: null,
				isSvgLoaded: false,

				selectedParams: {
					fontWidth: "10",
					selectedBold: false,
					selectedFillColor: "#123456",
					selectedFillType: 2,
					selectedFont: "Microsoft YaHei",
					selectedFontSize: "10",
					selectedItalics: false,
					selectedLineColor: "#987654",
					selectedLineType: 0,
					selectedLineWidth: "2",
					selectedUnderline: false,
					text: null
				},

				// 出发renderjs删除的标记，改变即触发删除
				removeSign: 0,

				// removeSign
				markupText: '',

				// inputStr
				InputTextDefaultStr: '',

				// get markup string
				getMarkupStrSign: 0,
				
				// 触发重置图纸窗口
				resetDrawViewSign: 0
			}
		},

		watch: {
			lineColor(val) {
				this.selectedParams.selectedLineColor = val;
			},

			lineWidth(val) {
				this.selectedParams.selectedLineWidth = val * 2 + '';
			},

			fontSize(val) {
				this.selectedParams.selectedFontSize = val * 2 + '';
			},

			svgOption: {
				handler(newVal, oldVal) {

				},
				deep: true,
				immediate: true
			}
		},

		mounted() {
			this.initProp = 0;
			if (this.needScreenShot)
				this.genDrawClip();
		},

		methods: {
			genDrawClip() {
				let _this = this;
				const query = uni.createSelectorQuery().in(this);
				query.select('.draw-content').boundingClientRect(data => {
					_this.drawClip = {};
					_this.drawClip.top = data.top;
					_this.drawClip.left = data.left;
					_this.drawClip.width = data.width;
					_this.drawClip.height = data.height;
					_this.genDrawClipImageInstance();
				}).exec();
			},


			genDrawClipImageInstance(e) {
				if (e && e.isLoaded)
					this.isSvgLoaded = true;
				if (this.drawClip == null || !this.isSvgLoaded) {
					return;
				}
				var pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];

				let successCB = (e) => {
					// this.captureImgPath = e.detail.target;
					this.$emit("onDrawShotFinish", e.detail.target);
				};

				let errorCB = (e) => {
					console.log("errorCB");
				};

				setTimeout(() => {
					captureScreenUtil.captureScreen({
						page: currentPage,
						successCB: successCB,
						errorCB: errorCB,
						clip: this.drawClip
					})
				}, 1000);

			},

			onCloseClick() {
				this.$emit("onDrawCloseClick", {})
			},

			onMarkupSelectedInstance(e) {
				this.selectedParams = e;
				this.$emit("onMarkupSelected", {
					posOrder: e.posOrder,
					pos_ordr: e.posOrder,
					lineColor: e.selectedLineColor,
					lineWidth: Number(e.selectedLineWidth) / 2,
					fontSize: Number(e.selectedFontSize) / 2,
				})
			},
			
			onGetMarkupStrInstance(e) {
				this.$emit("onGetMarkupStr", e);
			},
			
			/**
			 * 外部触发生成markup 字符串
			 */
			onGetMarkupStart() {
				this.getMarkupStrSign++;
			},

			onDelClick() {
				this.removeSign++;
			},

			openInputTextDialog(inStr) {
				this.InputTextDefaultStr = inStr;
				this.$refs.dialogInput.open();
			},

			inputConfirm(e) {
				console.log("inputConfirm = ", e);
				this.selectedParams.text = e;
			},
			
			resetDrawView() {
				this.resetDrawViewSign++;
			}
		}
	}
</script>

<script module="renderCAD" lang="renderjs">
	import * as d3 from "./utils/d3.v5.js";
	import * as svg_opt from "./utils/svg_opt.js";

	export default {
		data() {
			return {
				svgOwnerInstance: null,
			}
		},

		mounted() {
			this.initSvg();
		},

		methods: {
			initSvg() {
				if (!this.svgOption.svgSourceUrl || this.svgOption.svgSourceUrl == "") {
					svg_opt.removeSvg();
					return;
				}

				svg_opt.setSvgLineWidthRatio(1.5);
				svg_opt.setSvgBoundingBoxRatio(0, 0, 0.9);
				svg_opt.setEditDotWidthRatio(3);

				svg_opt.AddSvg(this.svgOption.svgSourceUrl, "rightCAD", this.onSvgMousePosChange);
				svg_opt.SetSvgMouseMode(2);
				svg_opt.setCanEditSelectMarkup(false);
				svg_opt.setCanFitPositionAndScale(false);
				svg_opt.setSelectCallBack(this.onMarkupSelected);
				svg_opt.setOpenInputTextCallBack(this.toShowTextInputDialog);
				svg_opt.setLoadCallBack(this.onSvgLoaded);
				svg_opt.setUpdateMarkupBaseInfoCallback(this.updateMarkupFileBaseData);
				svg_opt.setContextMenuDoubleClickFun(this.onSvgContextMenuDoubleClick);
			},

			drawClipChange(newValue, oldValue, ownerInstance, instance) {
				if (newValue == null)
					return;

			},

			initChange(newValue, oldValue, ownerInstance, instance) {
				this.svgOwnerInstance = ownerInstance;
				// this.initSvg();
			},

			/**
			 * 基本图纸信息  绘制图纸
			 */
			svgOptionChange(newValue, oldValue, ownerInstance, instance) {
				// oldValue.svgSourceUrl == "" && 
				if (newValue.svgSourceUrl != "") {
					this.initSvg();
				}
			},

			/**
			 * 图纸绘制结束
			 */
			onSvgLoaded() {
				let _self = this;
				this.isLoaded = true;
				if (this.ballMarkData.length > 0) {
					svg_opt.genMarkupOrignDataFromExternalData(this.ballMarkData);
				};

				this.$ownerInstance.callMethod('genDrawClipImageInstance', {
					isLoaded: true
				});

				console.log("onMarkupSelected load xml before");
				console.log("this.svgMarkupFileUrl = " + this.svgMarkupFileUrl);
				console.log("this.isLoaded = " + this.isLoaded);
				if (this.svgMarkupFileUrl && this.svgMarkupFileUrl.length > 0) {
					console.log("onMarkupSelected load xml");
					svg_opt.loadMarkupsFromFile(this.svgMarkupFileUrl);
				}
			},

			onSvgMousePosChange(posX, posY) {},

			onMarkupSelected(e) {
				if (e == null) return;
				// this.svgOwnerInstance.onMarkupSelectedInstance(e);

				svg_opt.setGParams(e);
				this.$ownerInstance.callMethod('onMarkupSelectedInstance', e);
			},

			/**
			 * 图形选择回调
			 */
			onShapeSelectChange(e, oldValue, ownerInstance, instance) {
				if (e == null || e < 0)
					return
				if (e == 0) {
					svg_opt.changeGlobalState(0, -1);
					// svg_opt.SetSvgMouseMode(2);
				} else {
					// svg_opt.SetSvgMouseMode(2);
					svg_opt.changeGlobalState(3, e); // add状态
				}
			},

			onDrawParamChange(e, oldValue, ownerInstance, instance) {
				svg_opt.setGParams(e);
			},

			onRemoveSignChange(e, oldValue, ownerInstance, instance) {
				svg_opt.tryDeleteSelectMarkup();
			},

			onSvgMarkupFileUrlChange(e, oldValue, ownerInstance, instance) {
				console.log("onSvgMarkupFileUrlChange e = " + e);
				if (e && e.length > 0 && this.isLoaded)
					svg_opt.loadMarkupsFromFile(e);
			},

			onCanEditSelectMarkupChange(e, oldValue, ownerInstance, instance) {
				console.log("onCanEditSelectMarkupChange e = " + e);
				svg_opt.setCanEditSelectMarkup(e);
			},

			onCanFitPositionAndScaleChange(e, oldValue, ownerInstance, instance) {
				console.log("onCanFitPositionAndScaleChange e = " + e);
				svg_opt.setCanFitPositionAndScale(e);
			},

			onGetMarkupStrSignChange(e, oldValue, ownerInstance, instance) {
				console.log("onGetMarkupStrSignChange e = " + e);
				let strContent = svg_opt.genMarkupsContent(null);
				console.log(strContent.length); // onMarkupSelectedInstance
				this.$ownerInstance.callMethod('onGetMarkupStrInstance', strContent);
			},
			
			onResetDrawViewChange(e, oldValue, ownerInstance, instance) {
				console.log("onResetDrawViewChange  ==  " + e )
				svg_opt.ResetSvgView();
			},

			toShowTextInputDialog(e) {
				this.$ownerInstance.callMethod('openInputTextDialog', e);
			},

			onTestClick() {},

			onSelectMarkupIdChange(e) {
				svg_opt.changeSelectStatusById(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.draw-content {
		height: 100%;
		background-color: #fff;
	}

	.rightCAD {
		width: 100%;
		height: 100%;
	}

	.close-icon {
		width: 30upx;
		height: 30upx;
	}

	.close-lay {
		position: absolute;
	}
</style>
